<template>
    <!-- 推荐模块 -->
    <div class="home">
        <Scroll class="wrapper" ref="wrapper" :probeType="3" :pulldown="pulldown" :data="swiperList" :pullup="pullup" @scrollToEnd="loadMore" @pulldown="refreshData">

            <van-loading v-if="loading1" style="text-align:center">{{ loading1 ? '释放刷新' :'加载完毕'}}</van-loading>
            <ul>
                <Swiper :swiperList="swiperList" />
                <li v-for="(item,index) in activityList">
                    <div class="contianer">
                        <img :src="item.imgUrl" alt="">
                        <div>
                            <div class="top">
                                <span>活动</span>
                                <span class="date">{{item.date}}</span>
                            </div>
                            <div class="bottom">
                                {{item.name}}
                            </div>
                        </div>
                        <van-icon class="icon" name="arrow" size="25" />
                    </div>
                </li>
                <van-loading color="#1989fa" class="loading" v-if="showLoading" size="30px">加载中...</van-loading>
                <!-- 数据加载完毕的时 -->
                <div v-if="hasData" class="hasData">
                    数据加载完毕
                </div>
                <!-- 占位符 -->
                <div class="divide">
                </div>
            </ul>
        </Scroll>
    </div>
</template>

<script>
//引入插件
import Scroll from '@/components/Scroll.vue'
import { getActivityList } from '@/common/api/index.js'
import { Toast } from 'vant'
import Vue from 'vue'
import Swiper from '@/components/Swiper.vue'
Vue.use(Toast)
export default {
    name: "Home",
    data () {
        return {
            swiperList: [],
            activityList: [],
            pulldown: true,
            pullup: true,
            loading1: false,
            showLoading: false,
            hasData: false,
            pageIndex: 1
        }
    },
    activated () {
        this.$refs.wrapper.refresh()
    },
    mounted () {
        this.getData()
    },
    components: {
        Scroll,
        Swiper
    },
    methods: {
        getData () {
            getActivityList(this.pageIndex++).then(res => {
                this.hasData = false
                console.log(res);
                if (res.message) {
                    this.hasData = true
                    return
                }
                this.swiperList = res.swiperList
                let list = res.data.map((item, index) => {
                    item.date = item.date.slice(0, 10)
                    return item
                })
                this.activityList = [...this.activityList, ...list]
            })
        },
        // 下拉加载更多方法
        loadMore () {
            this.showLoading = true
            console.log(this.showLoading);
            setTimeout(() => {
                this.getData()
                this.showLoading = false
            }, 300)
        },
        // 上拉刷新方法
        refreshData () {
            this.loading1 = true
            this.pageIndex = 1
            setTimeout(() => {
                this.swiperList = []
                this.activityList = []
                this.getData()
                this.loading1 = false
            }, 300)
            // setTimeout(() => {
            //     getSwiperList().then(res => {
            //         this.swiperList = res.data
            //         Toast('刷新成功')
            //     }).finally(() => {
            //         this.loading1 = false
            //     })
            // }, 200)
        }
    }
};
</script>

<style scoped>
.wrapper {
    flex: 1;
    overflow: hidden;
}

img {
    width: 100%;
}

.loading {
    padding-top: 8px;
    height: 20px;
    text-align: center;
    background: #f0f0f0;
}

.hasData {
    padding-top: 8px;
    color: #b3b4b5;
    background: #f0f0f0;
    font-size: 16px;
    height: 50px;
    text-align: center;
}
.divide {
    height: 200px;
    background: #f0f0f0;
}
ul li {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #f2eae2;
}
.contianer {
    width: 95%;
    padding: 15px 0;
    position: relative;
    display: flex;
    align-items: center;
    background: #f2eae2;
}
.icon {
    position: absolute;
    right: -5px;
    bottom: 45px;
    color: #c0bcb9;
}
.contianer:nth-child(n + 1) {
    border-bottom: 2px solid #c0bcb9;
}
ul li img {
    width: 120px;
    height: 80px;
}
.top {
    display: flex;
    justify-content: space-between;
    font-size: 13px;
    padding: 0px 17px;
    margin-bottom: 5px;
    color: #c0bcb9;
}
.top .date {
    margin-right: 5px;
}
.bottom {
    color: #000;
    font-size: 15px;
    padding: 4px 17px 0px;
    margin-top: 5px;
    margin-right: 14px;
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}
</style>